@charset "utf-8";
@import "reset";
$fs:170.66px;
html {
    font-size: $fs;
}

@function r($px) {
    @return $px/$fs*1rem;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f7f7f7;
    margin-bottom: r(80px);
    button {
        outline: none;
    }
}

header {
    border-bottom: r(1px) solid #c1c1c1;
    .container {
        display: flex;
        width: 100%;
        height: r(88px);
        font-size: 0px;
        .item {
            font-size: r(35px);
            button {
                outline: none;
                width: r(22px);
                height: r(37px);
                font-size: r(40px);
                background-color: #f7f7f7;
                color: #848689;
            }
        }
        //      返回按钮
        .item:first-of-type {
            margin-top: r(26px);
            margin-left: r(29px);
        }
        //      标题
        .item:nth-of-type(2) {
            margin-top: r(27px);
            margin-left: r(197px);
            color: #333333;
        }
        //      放大镜
        .item:last-of-type {
            margin-top: r(27px);
            margin-left: r(174px);
            width: r(36px);
            i{
                font-size: r(30px);
            }
            button {
                width: r(62px);
                font-size: r(30px);
                color: #666666;
            }
        }
    }
}

section {
    .title {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: r(80px);
        background-color: #FFFFFF;
        //      上架商品文字
        .Commodity_shelves_text {
            height: 100%;
            
            h5 {
                cursor: pointer;
                font-size: r(26px);
                font-weight: 500;
               
                line-height: r(80px);
                
            }
        }
        //      已下架文字
        .Already_down {
            height: 100%;
            h5 {
                font-size: r(26px);
                font-weight: 500;
                line-height: r(80px);
                 cursor: pointer;
            }
        }
    }
    //  商品部分
    .commodity {
        height: r(240px);
        border-top: r(1px) solid #e0e0e0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        //      图片
        .img {
            width: r(200px);
            height: r(200px);
            background: #FFFFFF;
            img {
                width: 100%;
                height: 100%;
            }
        }
        //      商品标题等明细
        .text {
            h5 {
                font-size: r(26px);
                font-weight: 500;
                width: r(380px);
            }
            p {
                font-size: r(24px);
                margin-top: r(24px);
            }
            //          售价，更多
            .mingxi {
                display: flex;
                p:nth-of-type(2) {
                    font-size: r(30px);
                    color: #d62d31;
                }
                .box {
                    width: r(44px);
                    height: r(44px);
                    border: r(3px) solid #d62d31;
                    border-radius: 50%;
                    font-size: 0;
                    color: #d62d31;
                    font-weight: bold;
                    text-align: center;
                    margin-top: r(24px);
                    margin-left: r(160px);
                    display: flex;
                   
                    p{
                        font-size: r(18px);
                        margin: 0;
                        width: 100%;
                        height: 100%;
                        margin-top: r(8px);
                        cursor: pointer;
                       
                    }
                }
            }
        }
        .edit {
            display: none;
            background-color: #000;
            opacity: 0.8;
            color: #FFFFFF;
            width: r(600px);
            height: r(110px);
            position: absolute;
            left: r(30px);
            top: r(36px);
            .pic_iconfont {
                display: flex;
                margin-top: r(14px);
                justify-content: space-around;
                .iconfont {
                    font-size: r(46px);
                }
            }
            .pic_text {
                font-size: r(20px);
                display: flex;
                justify-content: space-around;
                margin-top: r(8px);
            }
        }
    }
}

footer {
    .end_box {
        font-size: 0;
        height: r(100px);
        width: 100%;
        border-top: r(1px) solid #c1c1c1;
        background-color: #FFFFFF;
        position: fixed;
        bottom: 0px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        button {
            width: r(270px);
            height: r(70px);
            font-size: r(28px);
            border-radius: r(8px);
        }
        .add {
            background-color: #d62d31;
            color: #FFFFFF;
        }
        .Administration {
            background: #FFFFFF;
            border: r(1px) solid #bcc1c4;
        }
    }
}

//      点击事件，添加样式
.addbox {
    width: r(35px);
    height: r(35px);
    border-radius: 50%;
    border: r(1px) solid #cfcfcf;
    font-size: 0;
}

.click_end_box {
    font-size: 0;
    height: r(100px);
    width: 100%;
    border-top: r(1px) solid #c1c1c1;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    //      点击事件样式
    .allBox {
        width: r(35px);
        height: r(35px);
        border-radius: 50%;
        border: r(1px) solid #cfcfcf;
        font-size: 0;
    }
    .text {
        p {
            font-size: r(24px);
        }
    }
    button {
        width: r(140px);
        height: r(60px);
        font-size: r(24px);
    }
    .top {
        background-color: #ffffff;
        color: #666666;
        border: r(1px) solid #d2d2d2;
    }
    .Lower_frame {
        background-color: #ffffff;
        color: #666666;
        border: r(1px) solid #d2d2d2;
    }
    .delete {
        background-color: #d62d31;
        color: #FFFFFF;
    }
    
    
}
.h5 {
        cursor: pointer;
        font-size: r(26px);
        font-weight: 500;
        color: #d62d31;
        line-height: r(80px);
        border-bottom: r(4px) solid #d62d31;
    }